<template>
  <div ref="devRef" :style="getStyle()" v-show="thisSlotSetting?.show">
    <slot></slot>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, getCurrentInstance, inject, computed, nextTick, watch } from 'vue';
export default {
  name: "partition-drag-block",
  props: {
    originalFlex: [Number],
    keyId: String,
    minValue: Number,
    maxValue: Number,
  },
  setup(props, context){

    const devRef = ref();

    const { proxy } = getCurrentInstance();

    const slotSettings = inject("slotSettings");
    const partitionDragInit = inject("partitionDragInit");

    const thisSlotSetting = computed(() => {
      const find = slotSettings.value.find(item => item.keyId === props.keyId);
      return find;
    })

    const windowInfo = computed(() => {
      const offsetHeight = devRef.value.offsetHeight;
      const offsetWidth = devRef.value.offsetWidth;
      return {
        offsetHeight,
        offsetWidth
      }
    })

    watch(() => partitionDragInit, (val, old) => {
      if(val.isInit){
        thisSlotSetting.value.windowInfo = windowInfo.value;
      }
    }, {deep: true})

    const datas = reactive({
    })



    const methods = {
      getStyle(){
        const flex = thisSlotSetting.value?.flex ? thisSlotSetting.value?.flex + '%' : props.originalFlex + '%'
        if(partitionDragInit.info.flexDirection == "column"){
          return `height:${flex}`
        }
        return `width:${flex}`
      }
    }

    onMounted(() => {
      nextTick(() => {
        // console.log("插槽组件", devRef.value.offsetWidth)
      })
    })

    return {
      windowInfo,
      devRef,
      ...toRefs(datas),
      ...methods,
      thisSlotSetting
    }
  }
}
</script>

<style>

</style>